<template>
    <div class="header" v-if="!isWeiXin">
        <div class="headHoder"></div>
        <header>
            <div class="left" @click="$router.go(-1)">
                <i ></i>
            </div>
            <div class="con">{{this.config.title}}</div>
            <div class="right"></div>
        </header>
    </div>
</template>  

<script>
export default {
    name: "appHeader",
    props: ['data'],
    data(){
        return {
            config: {
                hideTitle:false,
                hideLeft:false,
                left:'back',
                title:'' 
            },
            isWeiXin:false
        }
    },
    mounted (){
        this.config  = $.extend({}, this.config, this.data);
        this.isWeiXin = this.$public.isWeiXin();

        if(this.config && !this.config.title){
            this.config.title = this.$route.meta.title ;
        }   
    },
    methods:{
        back1(){
            $router.back(-1);
        }
    }
}
</script>
<style lang="stylus" scoped>
    .headHoder
        height $headH
    header
        width 100%
        position fixed 
        top 0
        z-index 20
        height $headH
        display flex
        align-items center
        background $headBg
        color $headC
        font-size $headFont
    
        &:after
            content " "
            position absolute
            bottom 0
            left 0
            width 100%
            height 1Px
            background $border-color
            transform scaleY(.5)
        .con
            width 100%
            text-align center
        .left 
            position absolute
            display inline-block
            width .6rem
            height .6rem
            background url('../assets/images/back.png') no-repeat 
            background-size cover
            margin-left .2rem
            

</style>